<template>
   <div v-loading="loading">
       <vue-office-excel
            v-if="excel"
           :src="excel"
           :options="options"
           style="height: 100vh;"
           @rendered="renderedHandler"
           @error="errorHandler"
       />

        <NeedPay :query="query" />
   </div>
</template>

<script>
import { useRoute } from 'vue-router';
//引入VueOfficeExcel组件
import VueOfficeExcel from '@vue-office/excel'
//引入相关样式
import '@vue-office/excel/lib/index.css'
import NeedPay from './NeedPay.vue';
export default {
    name: "VueOfficeExcelDemo",
    components: {
        VueOfficeExcel,
        NeedPay
    },
    data() {
        return {
            loading: true,
            options:{
                xls: true,       //预览xlsx文件设为false；预览xls文件设为true
                minColLength: 0,  // excel最少渲染多少列，如果想实现xlsx文件内容有几列，就渲染几列，可以将此值设置为0.
                minRowLength: 0,  // excel最少渲染多少行，如果想实现根据xlsx实际函数渲染，可以将此值设置为0.
                widthOffset: 10,  //如果渲染出来的结果感觉单元格宽度不够，可以在默认渲染的列表宽度上再加 Npx宽
                heightOffset: 10, //在默认渲染的列表高度上再加 Npx高
                beforeTransformData: (workbookData) => {return workbookData}, //底层通过exceljs获取excel文件内容，通过该钩子函数，可以对获取的excel文件内容进行修改，比如某个单元格的数据显示不正确，可以在此自行修改每个单元格的value值。
                transformData: (workbookData) => {return workbookData}, //将获取到的excel数据进行处理之后且渲染到页面之前，可通过transformData对即将渲染的数据及样式进行修改，此时每个单元格的text值就是即将渲染到页面上的内容
            },
            excel: '', //设置文档地址 //http://static.shanhuxueyuan.com/test.xlsx
     

            query: {}
        }
    },
    methods: {
    
        renderedHandler(instance) {
            this.loading = false;
            console.log("渲染完成", instance)
            // 使用实例方法取消选中
            //instance.selectCell(null); // 取消选中
        },
        errorHandler() {
            this.loading = false;
            console.log("渲染失败")
        },
   
        // toSendToFriend(){
        //     //向小程序发送消息，只有回退时，小程序才能收到
        //     wx.miniProgram.postMessage({ data: {type: 'share' }});
        //     wx.miniProgram.navigateBack();
        // },
        // toVip(){
        //     wx.miniProgram.navigateTo({
        //         url: `/pages/mine/vip/vip`
        //     })
        // }
    },
    created(){
        const route = useRoute();
        console.log('query', route.query);
        if(route.query.file){
            let file = decodeURIComponent(route.query.file);
            this.options.xls = route.query.ext === 'xls';
            this.excel = decodeURIComponent(file);
        }

        this.query = route.query;

        // this.needpay = route.query.np == 1;
        // this.fee = route.query.pri || 0;

        //alert(this.needpay)
    }
};
</script>

<style scoped>
.disbaled-cover{
  position: fixed;
  top: 0; right: 0;bottom: 0;left:0;
  background: linear-gradient(to bottom, rgba(255,255,255, 0) 50%, rgba(255,255,255, 1) 70%, rgba(255,255,255, 1));
  z-index: 100;
}
.price-box{
  position: absolute;
  left:0;right:0;bottom: 0;
  height: 40%;
  display: flex;
  justify-content: center;
  align-items: center;

}
</style>